<template>
	<view class="content">
		<view class="anni">
			<yfsVideo v-if="data.video" :src="data.video" style="margin-top: 100rpx;"></yfsVideo>
			<view class="list">
				<view class="info">
					<text class="text">{{ data.post_title }}</text>
					<text class="text1">{{ data.is_study === 1 ? '已学习' : '未学习' }}</text>
				</view>
				<text class="text11 time">{{ data.published_time }}</text>
				<text class="text11">{{ data.post_source }}</text>
				<view class="info1 ">{{ data.post_excerpt }}</view>
				<view
					class="image"
					v-if="data.thumbnail"
					:style="[
						{
							background: `url(${data.thumbnail}) no-repeat center`,
						},
						{ backgroundSize: 'cover' },
					]"
				></view>
			</view>
			<view class="btn">
				<view class="text">资讯详情</view>
				<rich-text v-html="kaola_content" selectable></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
import yfsVideo from '@/components/yfs-video/yfs-video.vue';
export default {
	components: {
		yfsVideo,
	},
	data() {
		return {
			kaola_content: '',
			current: 0,
			list: [
				{
					name: '活动详情',
				},
				{
					name: '精彩瞬间',
				},
			],
			id: 0,
			data: {},
			learn: {},
		};
	},
	methods: {
		//用户资讯阅读记录存入（每日学习）
		async recDpst(e) {
			const res = await this.$u.post(
				'/api/Allnews/adduser_infobrowse',
				{ article_id: this.id },
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('res >>  ', res);
			if (res.code === 1) return uni.$showMsg(res.msg);
		},
		change(index) {
			this.current = index;
		},
		//资讯文章详情
		async articleDetails(e) {
			console.log('e :>> ', e);
		
			if (e == 1) {
				var res = await this.$u.post(
					'/api/Allnews/info_detial',
					{ article_id: this.id },
					{
						'XX-Token': uni.getStorageSync('token'),
						'XX-Device-Type': 'wxapp',
					},
				);
			} else {
				var res = await this.$u.get('/api/Home/info_detial', { article_id: this.id });
			}

			console.log('res >>  ', res);
			this.data = res.data;
			this.kaola_content = res.data.kaola_content
				.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
				.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 100%;" $1');
			console.log('this.data :>> ', this.data);
			uni.setStorageSync('shuliang', 1);
		},
	},
	onShareAppMessage() {
		//发送给朋友
		return {
			title: '考拉妈妈招聘月嫂/育儿嫂招聘期待优秀的你加入！王老师:17318665879,张老师:13198597285', // 默认是小程序的名称(可以写slogan等)
			path: 'pages/zhixun/xiangqing/xiangqing?user_id=' + uni.getStorageSync('id') + '&id=' + this.id, // 默认是当前页面，必须是以‘/’开头的完整路径
			//	imageUrl: "https://s3.ax1x.com/2021/01/04/sPoBfH.jpg", //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
		};
	},
	onShareTimeline() {
		//朋友圈
		return {
			title: '考拉妈妈招聘月嫂/育儿嫂招聘期待优秀的你加入！王老师:17318665879,张老师:13198597285', // 默认是小程序的名称(可以写slogan等)
			path: 'pages/zhixun/xiangqing/xiangqing?user_id=' + uni.getStorageSync('id') + '&id=' + this.id, // 默认是当前页面，必须是以‘/’开头的完整路径
			//	imageUrl: "https://s3.ax1x.com/2021/01/04/sPoBfH.jpg", //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			success: function(res) {
				// 转发成功之后的回调
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
		};
	},
	onLoad(i) {
		console.log('i :>> ', i);
		const token = uni.getStorageSync('token');
		if (token) {
			console.log('i :>> ', i);
			this.id = i.id;
			this.articleDetails(1);
			var _this = this;
			setTimeout(function() {
				_this.recDpst();
			}, 3000);
		} else {
			this.id = i.id;
			this.articleDetails(0);
		}
	},

	onReachBottom(e) {
		this.$u.debounce(this.recDpst(), 10000);
	},
};
</script>

<style lang="scss">
.content {
	.anni {
		background-color: #f8f8f8;
		padding: 30rpx;
		height: 100vh;
		/deep/.bbl-content {
			margin-bottom: 30rpx;
		}
		.list {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			padding: 30rpx 22rpx;
			width: 690rpx;
			//height: 532rpx;
			background: #ffffff;
			border-radius: 20rpx;
			.info {
				display: flex;
				justify-content: space-between;
				.text {
					width: calc(100%-101rpx);
					// height: 30rpx;
					line-height: 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 40rpx;
				}
				.text1 {
					width: 101rpx;
					height: 30rpx;
					background: #fdebe0;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #5a1524;
					line-height: 30rpx;
					margin-right: -22rpx;
				}
			}
			.time {
				margin-top: 25rpx;
			}
			.text11 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 27rpx;
				// margin-top: 24rpx;
				margin-bottom: 12rpx;
				//margin: 20rpx 0 ;
			}
			.info1 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
			}
			.image {
				width: 650rpx;
				height: 300rpx;
				border-radius: 20rpx;
				margin-top: 19rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
		.btn {
			margin-top: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 22rpx;
			.text {
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				height: 55rpx;
				line-height: 55rpx;
			}
		}
	}
}
</style>
